<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
		   html{
				height:100%;
			}
			
			body{
				height:100%;
			}
			#page1,#page2,#page3,#page4{
				height:100%;
				background-repeat:no-repeat;
				background-size:100% 100%;
			}
			#page1{
				background-image: url(img/halloween1.jpg);
				
    		 }
			 #page2{
			 	 background-image: url(img/halloween2.jpg);
				 display: none;
			 }
			#page3{
					background-image: url(img/halloweenMain3.jpg);
				   display: none;
				  }
			#page4{
					background-image: url(img/charm1.jpg);
					display: none;
		     }
			 .box{
				 position:absolute;
				left:260px;
				bottom:200px;
				animation:boxframe 1s infinite;

			 }
			 @keyframes boxframe{
				 from{
					 left:260px;
				 }
			     to{
				 left:300px;
			 }
			 }
			 .title{
				 position:absolute;
				 left:312px;
				 top:64px;
				 animation:titleframe 2s;
			 }
			 @keyframes titleframe{ 
			 	from{opacity:0;}
			 	to{
					opacity:1;}
			 }
			 #i1
			 {
			 position:fixed;
			 left:50px;
			 top:100px;
			 animation: i1frame 5s infinite;
			 } 
				@keyframes i1frame{
					33%{
						left:50px;
						top:300px;
					}
					66%{
						left:150px;
						top:200px;
						
					}
					100%{
							left:50px;
							top:100px;
						}
				}
				
			  #i2
			  {
			  position:fixed;
			  left:250px;
			   top:400px;
			   animation: i2frame 5s infinite;
			  }
			  @keyframes i2frame{
			  	33%{
			  		left:300px;
			  		top:430px;
			  	}
			  	66%{
			  		left:350px;
			  		top:430px;
			  		}
					100%{
			  			left:250px;
			  			top:400px;
			  		}
			  	}
			   #i3
			  {
			  position:fixed;
			  left:50px;
			  top:650px;
			  animation: i3frame 2s infinite;
			  }
			  
			  @keyframes i3frame{
			  	50%{
					left:150px;
				}
			  	100%{
					left: 50px;
				}
			  }
			 #i4
			  {
			  position:fixed;
			  left:500px;
			  top:50px;
			  animation: i4frame 3s infinite;
			  }
			  @keyframes i4frame{
			  	50%{
			  					left:300px;
			  				}
			  	100%{
			  					left: 150px;
			  				}
							}

			#i5
			  {
			  position:fixed;
			 left:400px;top:900px;
			 animation: i5frame 2s infinite;
			  }
			  @keyframes i5frame{
			  				 from{
			  					 width:210px;
			  				 }
			  				 to{
			  					 width:80px;
			  				 }
			  }

			   #i6
			  {
			  position:fixed;
			 left:300px;
			 top:800px;
			  animation: i6frame 5s infinite;
			  }
			  @keyframes i6frame{
			  				 from{
			  					 width:110px;
			  				 }
			  				 to{
			  					 width:40px;
			  				 }
			  }

			   #i7
			  {
			  position:fixed;
			  right:50px;
			  bottom:300px;
			  animation: i7frame 2s infinite;
			  }
			  @keyframes i7frame{
				 from{
					 width:142px;
				 }
				 to{
					 width:20px;
				 }
			  }
			 
		</style>
		<script type="text/javascript">
			function showPage(pg){
				var page1 = document.getElementById("page1");
				page1.style.display ="none";
				
				var page2 = document.getElementById("page2");
				page2.style.display ="none";
				
				var page3 = document.getElementById("page3");
				page3.style.display ="none";
				
				var page4 = document.getElementById("page4");
				page4.style.display ="none";
				
				
				var page =document.getElementById("page"+pg);
				page.style.display = "block";
				
			}
			function showCharm(ci){
				var page1 = document.getElementById("page1");
				page1.style.display ="none";
				
				var page2 = document.getElementById("page2");
				page2.style.display ="none";
				
				var page3 = document.getElementById("page3");
				page3.style.display ="none";
				
				var page4 = document.getElementById("page4");
				page4.style.display ="none";
				
				var page4 = document.getElementById("page4");
				page4.style.backgroundImage = "url(img/charm"+ ci + ".jpg)";
				page4.style.display = "block";
			}
			
			function closeWin(){
			    	var page4 = document.getElementById("page4");
					page4.style.display = "none";
					
					var page3 = document.getElementById("page3");
					page3.style.display = "block";
			}
			
		</script>
	</head>
	<body>
		<div id="page1">
			<img class="title" src="img/title.png">
			<img class="box" src="img/box.png" onclick="showPage(2)">
		</div>
		<div id="page2">
				<img class="title" src="img/pumpkin.png" >
				<img class="box" src="img/startGame.jpg" onclick="showPage(3)">
		</div>
		<div id="page3">
			<img id="i1"  src="img/1.png" onclick="showCharm(1)">
			<img id="i2"  src="img/2.png" onclick="showCharm(2)">
			<img id="i3"  src="img/3.png" onclick="showCharm(3)">
			<img id="i4"  src="img/4.png" onclick="showCharm(4)">
			<img id="i5"  src="img/5.png" onclick="showCharm(5)">
			<img id="i6"  src="img/6.png" onclick="showCharm(6)">
			<img id="i7"  src="img/7.png" onclick="showCharm(7)">
		</div>
		<div id="page4">
			<img src="img/back.png" onclick="closeWin()">
		</div>
			
	</body>
</html>
